<template>
  <div class="page-container" v-loading="loadingExport">
    <div class="page-content">
      <div class="panel-container">
        <el-radio-group v-model="tabActive" style="margin-bottom: 20px" @change="handleTabChange">
          <el-radio-button label="">全部订单</el-radio-button>
          <el-radio-button :label="1">待付款</el-radio-button>
          <el-radio-button :label="2">已完成</el-radio-button>
          <el-radio-button :label="3">已取消</el-radio-button>
        </el-radio-group>
        <!--搜索-->
        <searchuinew style="margin-bottom: 20px" :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchuinew>

        <!--数据信息-->
        <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" @sort-change="handleSortChange">
          <el-table-column align="center" header-align="center" label="订单编号" prop="id" width="300"></el-table-column>
          <el-table-column align="center" header-align="center" label="客户信息" prop="pay_user_name" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.pay_user_phone }}<br />
              {{ scope.row.company_name }}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="商品名称" prop="good_name" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" header-align="center" label="商品类型" prop="model_type" width="100">
            <template slot-scope="scope">
              {{ getModelType(scope.row.model_type) }}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="订单金额" prop="total_price" width="100"></el-table-column>
          <el-table-column align="center" header-align="center" label="订单状态" prop="sts" width="120">
            <template slot-scope="scope">
              {{ getSts(scope.row.sts) }}
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="支付金额" prop="order_price"></el-table-column>
          <el-table-column align="center" header-align="center" label="下单时间" prop="created_time" width="200" sortable="custom"></el-table-column>
          <el-table-column align="center" header-align="center" label="支付时间" prop="pay_time" width="200" sortable="custom"></el-table-column>
          <el-table-column align="center" header-align="center" label="到期天数" prop="" width="100"></el-table-column>
          <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleView(scope)">查看</el-button>
              <el-button size="mini" type="text" @click="handleExport(scope)">导出</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope)" class="text-danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          background
          :current-page="pageIndex"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalPage"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
      </div>
    </div>

    <!--  订单详情 -->
    <el-drawer title="订单详情" :visible.sync="showDialogDetail" :destroy-on-close="true" size="40%">
      <DialogDetail :info="currentOrder" @close="showDialogDetail = false" @refresh="handleRefresh" />
    </el-drawer>
  </div>
</template>

<script>
import DialogDetail from './components/DialogDetail'
import { apiOrderArr, apiOrderDel } from '@/api/quotationPay'
import { formatFormData } from '@/utils/index'

export default {
  name: 'index',
  components: { DialogDetail },
  data() {
    return {
      tabActive: 0,
      searchFormArr: [
        {
          fieldName: '查询:',
          type: 'input',
          field: 'title',
          placeholder: '可输入公司名称/手机号',
        },
        {
          fieldName: '商品类型:',
          type: 'select',
          field: 'model_type',
          option: [
            { id: 1, text: '视频课' },
            { id: 2, text: '行情分析报告' },
            { id: 3, text: '会员' },
            { id: 4, text: '1v1咨询' },
          ],
          placeholder: '请选择',
        },
        {
          fieldName: '订单状态:',
          type: 'select',
          field: 'sts',
          option: [
            { id: 1, text: '待付款' },
            { id: 2, text: '已完成' },
            { id: 6, text: '已取消' },
          ],
          placeholder: '请选择',
        },
        {
          fieldName: '下单时间',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择下单时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '付款时间',
          type: 'timePicker',
          field: 'time2',
          placeholder: '请选择付款时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
      ],
      isAccording: true,
      searchParams: {
        title: '',
        model_type: '',
        sts: '',
        created_time1: '',
        created_time2: '',
        pay_time1: '',
        pay_time2: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      currentOrder: '',
      showDialogDetail: false,
      // (1, 'video'), (2, 'report'), (3, 'member_card'), (4, '1v1')
      modelTypeList: [
        { id: 1, text: '视频课' },
        { id: 2, text: '行情分析报告' },
        { id: 3, text: '会员' },
        { id: 4, text: '1v1咨询' },
      ],
      stsList: [
        { id: 1, text: '待付款' },
        { id: 2, text: '已完成' },
        { id: 3, text: '线下沟通' },
        { id: 4, text: '初步方案确定' },
        { id: 5, text: '方案完成' },
        { id: 6, text: '已取消' },
        { id: 7, text: '已失效' },
      ],
      loadingExport: false,
      sort: {},
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      if (this.sort.order) {
        // 排序
        if (this.sort.prop === 'created_time') {
          info.order_by_xd = this.sort.order === 'ascending' ? 2 : this.sort.order === 'descending' ? 1 : ''
        } else if (this.sort.prop === 'pay_time') {
          info.order_by_zf = this.sort.order === 'ascending' ? 2 : this.sort.order === 'descending' ? 1 : ''
        }
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiOrderArr(formData)
        .then((res) => {
          const { items, total, url } = res.result
          items.forEach((item) => {
            item.is_add_wx_show = parseInt(item.is_add_wx) === 1 ? '否' : '是'
            item.sign_method_show = parseInt(item.sign_method) === 1 ? '线上' : parseInt(item.sign_method) === 2 ? '线下' : '待签约'
          })
          this.dataList = items
          this.totalPage = total
          this.url = url
          this.dataListLoading = false
          if (this.currentOrder.id) {
            const order = this.dataList.find((item) => item.id === this.currentOrder.id)
            if (order) {
              this.currentOrder = order
            }
          }
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 列表查询
    searchParma(e) {
      console.log(e)
      this.searchFormArr.forEach((item) => {
        if (item.field === 'time' || item.field === 'time2') return
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      if (e.time) {
        this.searchParams.created_time1 = e.time[0]
        this.searchParams.created_time2 = e.time[1]
      } else {
        this.searchParams.created_time1 = this.searchParams.created_time2 = ''
      }
      if (e.time2) {
        this.searchParams.pay_time1 = e.time2[0]
        this.searchParams.pay_time2 = e.time2[1]
      } else {
        this.searchParams.pay_time1 = this.searchParams.pay_time2 = ''
      }

      this.pageIndex = 1
      this.getDataList()
    },
    // tab切换
    handleTabChange() {
      this.searchParams.sts = this.tabActive
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 查看
    handleView(scope) {
      this.showDialogDetail = true
      this.currentOrder = scope.row
    },
    // 导出
    handleExport(scope) {
      if (this.loadingExport) {
        return
      }
      this.loadingExport = true
      this.exportFunction(scope.row)
    },
    exportFunction(row) {
      const headerProperty = ['id', 'show_pay_user_info', 'good_name', 'show_model_type', 'order_price', 'show_sts', 'total_price', 'created_time', 'pay_time', '']
      const headerLabel = ['订单编号', '客户信息', '商品名称', '商品类型', '订单金额', '订单状态', '支付金额', '下单时间', '支付时间', '到期天数']
      const name = '行情付费订单'
      row.show_pay_user_info = row.pay_user_phone + ' ' + row.company_name
      row.show_model_type = this.getModelType(row.model_type)
      row.show_sts = this.getSts(row.sts)
      this.handleDownload(headerProperty, [row], headerLabel, name)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    handleDownload(headerProperty, list, headerLabel, name) {
      import('@/vendor/Export2Excel').then((excel) => {
        const data = this.formatJson(headerProperty, list)
        excel.export_json_to_excel({
          header: headerLabel,
          data,
          filename: name,
          autoWidth: this.autoWidth,
          bookType: 'xlsx',
        })
        this.loadingExport = false
        this.$message({
          message: '导出成功',
          type: 'success',
        })
      })
    },
    // 删除
    handleDelete(scope) {
      this.$confirm('确定要删除这个订单？').then(() => {
        apiOrderDel(formatFormData({ id_: scope.row.id })).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          this.getDataList()
        })
      })
    },
    // 刷新列表
    handleRefresh() {
      this.getDataList()
    },
    getModelType(type) {
      const res = this.modelTypeList.find((item) => item.id === type).text
      return res ? res : ''
    },
    getSts(type) {
      const res = this.stsList.find((item) => item.id === type).text
      return res ? res : ''
    },
    // 表格排序
    handleSortChange(sort) {
      this.sort = sort
      this.getDataList()
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text-1 {
  .link {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
